<div id="browser" class="clearfix" style="margin:0;padding:0;border:none;position:relative;">
<div id="files" class="as-list-view" style="float:left">
<div class="bg-info p-2 text-white overflow-hidden">
    <strong>${dir}</strong>&nbsp;
    <span id="selectedFileName"></span>
</div>
<ul class="as-list-view-content clearfix">
<#list files as file>
    <!-- ${file} -->
    <li id="file${file?index}" <#if file.directory>data-is-directory="true"</#if> class="as-list-view-item-list" data-file-name="${file.name?js_string}" data-file-path="${file.path}" >
        <span class="glyphicon">
<#if file.directory>
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.828 4a3 3 0 0 1-2.12-.879l-.83-.828A1 1 0 0 0 6.173 2H2.5a1 1 0 0 0-1 .981L1.546 4h-1L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3v1z"/>
          <path fill-rule="evenodd" d="M13.81 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4zM2.19 3A2 2 0 0 0 .198 5.181l.637 7A2 2 0 0 0 2.826 14h10.348a2 2 0 0 0 1.991-1.819l.637-7A2 2 0 0 0 13.81 3H2.19z" clip-rule="evenodd"/>
        </svg>
<#else>
<#if file.ext == '.bmp' || file.ext == '.jpg' || file.ext == '.jpeg' || file.ext == '.png' || file.ext == '.gif' || file.ext == '.ico'>
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M14.002 2h-12a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm-12-1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12z" clip-rule="evenodd"/>
          <path d="M10.648 7.646a.5.5 0 0 1 .577-.093L15.002 9.5V14h-14v-2l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71z"/>
          <path fill-rule="evenodd" d="M4.502 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" clip-rule="evenodd"/>
        </svg>
<#elseif file.ext == '.zip' || file.ext == '.rar' || file.ext = '.tar' || file.ext == '.gz'>
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 1h5v1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6h1v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z"/>
          <path d="M9 4.5V1l5 5h-3.5A1.5 1.5 0 0 1 9 4.5z"/>
          <path fill-rule="evenodd" d="M5 8.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v.938l.4 1.599a1 1 0 0 1-.416 1.074l-.93.62a1 1 0 0 1-1.11 0l-.929-.62a1 1 0 0 1-.415-1.074L5 9.438V8.5zm2 0H6v.938a1 1 0 0 1-.03.243l-.4 1.598.93.62.929-.62-.4-1.598A1 1 0 0 1 7 9.438V8.5z" clip-rule="evenodd"/>
          <path d="M6 2h1.5v1H6zM5 3h1.5v1H5zm1 1h1.5v1H6zM5 5h1.5v1H5zm1 1h1.5v1H6V6z"/>
        </svg>
<#elseif file.ext == '.txt' || file.ext == '.text'>
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4z"/>
          <path fill-rule="evenodd" d="M4.5 10.5A.5.5 0 0 1 5 10h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 8h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 4h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
        </svg>
<#elseif file.ext == '.htm' || file.ext == '.html'>
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4z"/>
          <path fill-rule="evenodd" d="M4.5 11.5A.5.5 0 0 1 5 11h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 9h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708l1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V7.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V7s1.54-1.274 1.639-1.208zM6.25 5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
        </svg>
<#elseif file.ext == '.ftl'>
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 1h5v1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6h1v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z"/>
          <path d="M9 4.5V1l5 5h-3.5A1.5 1.5 0 0 1 9 4.5z"/>
          <path fill-rule="evenodd" d="M8.646 6.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 9 8.646 7.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 9l1.647-1.646a.5.5 0 0 0 0-.708z"/>
        </svg>
<#else>
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 1h5v1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6h1v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z"/>
            <path d="M9 4.5V1l5 5h-3.5A1.5 1.5 0 0 1 9 4.5z"/>
        </svg>
</#if>
</#if>
        </span>
<#if !file.directory>
        <span class="text-left text-info as-literal as-file-name" style="width: 192px" data-tooltip="名称：${file.name}&lt;br/&gt;修改日期：${file.lastModified?datetime}&lt;br/&gt;大小：${file.readableSize}" >${file.name}</span>
<#else>
<#assign qs = 'dir=' + file.path >
<#if editor??>
<#assign qs = qs + '&CKEditor=' + editor >
</#if>
<#if funcNum??>
<#assign qs = qs + '&CKEditorFuncNum=' + funcNum >
</#if>
        <a class="text-left text-info as-literal" style="width: 192px" data-tooltip="名称：${file.name}" href="?${qs}" >[${file.name}]</a>
</#if>
    </li>
</#list>
</ul>
</div>
<div id="preview" class="as-preview" style="float:right;width:0px;height:0px;overflow:auto;position:relative;">
    <img id="previewImage" style="border:none;padding:0px;position:absolute;" />
    <pre id="previewText" style="border:none;padding:0px;margin:0px;background-color:#fdffdf;" ></pre>
</div>
</div>
<script>
'use strict';

let dir = '${dir}';
let browser = $('#browser');

$(document).ready(() => {
    unselectFile();
    hidePreview();
});

$('#files').click(evt => {
    unselectFile();

    $('#files li.selected').each(function() {$(this).removeClass('selected')});

    hidePreview();
});
$('#files > ul > li').each(function() {
    let li = $(this);

    // skip directory.
    let isDirectory = li.data('isDirectory');
    if (isDirectory) {
        return;
    }

    let name = li.data('fileName');
    let path = li.data('filePath');
    if (!path) {
        return;
    }

    li.click(evt => {
        fileAction.call(li, path, name);

        evt.stopPropagation();
    });
});
let onBrowserSizeChanged = function(cw, ch) {
    $('#files').css({height: ch});

    let preview = $('#preview');
    if (preview.width() != 0) {
        preview.height(ch);
    }
};
let fileAction = function(path, name) {
    selectFile(path, name);

    $('#files li.selected').each(function() {$(this).removeClass('selected')});
    this.addClass('selected');

    clearPreview();
    previewFile(path);
};
let selectFile = function(path, name) {
    $('#selectedFileName').html('<strong>选中的文件：</strong>' + name);

    if (typeof selectedFileChanged === 'function') {
        selectedFileChanged.call(document, path);
    }
};
let unselectFile = function() {
    $('#selectedFileName').html('<strong>未选中文件</strong>');

    if (typeof selectedFileChanged === 'function') {
        selectedFileChanged.call(document, '');
    }
};
let previewFile = function(path) {
    let ext = getExt(path);
    if (ext === '.bmp' || ext === '.jpg' || ext === '.jpeg' || ext === '.png' || ext === '.gif' || ext === '.ico') {
        // Image
        console.log('Preview image: ' + path);
        $('#previewImage')
            .attr('src', '<@spring.url "/file-browser/preview" />' + '?path=' + path)
            .on('load', (evt) => makeCenter($('#preview')[0], evt.target)).show();
    } else if (ext === '.txt' || ext === '.text' || ext === '.sql' || ext === '.ftl' || ext === '.html' || ext === '.htm') {
        // Text
        console.log('Preview text: ' + path);
        axios.get('<@spring.url "/file-browser/preview?path=" />' + path)
        .then(rsp => {
            $('#previewText').text(rsp.data).show();
        })
        .catch(error => {
            console.error(error);
        });
    } else {
        // Other
        console.log('Cannot preview: ' + path);
    }
    showPreview();
};
let getExt = function(name) {
    if (!name) {
        return '';
    }

    let p = name.lastIndexOf('.');
    if (p <= 0 || p == name.length - 1) {
        return '';
    } else {
        return name.substring(p).toLowerCase();
    }
};
let clearPreview = function() {
    $('#previewImage').attr('src', '').hide();
    $('#previewText').html('').hide();
};
let showPreview = function() {
    let iw = $('#browser').innerWidth();
    let pw = iw / 3.3;
    let fw = iw - pw - 2;

    $('#files').width(fw);
    $('#preview').width(pw).height($('#files').height());
};
let hidePreview = function() {
    let files = $('#files');
    let preview = $('#preview');

    preview.width(0);
    preview.height(0);
    files.width(''); // Use auto-width

    clearPreview();
};
</script>
